<template>
	<div class="box">
		<el-row>
			<el-col :span="6">
				<div class="item">
					<el-checkbox
						:indeterminate="isIndeterminateLeft"
						v-model="checkAll"
						@change="handleCheckAllLeft"
					>字段列表</el-checkbox>
					<div style="margin: 15px 0;"></div>
					<el-checkbox-group v-model="checkedDatas" @change="handleCheckedLeft">
						<el-checkbox
							v-for="(item,index) in leftData"
							:label="item.sort"
							:key="item.sort"
						>{{item.label}}</el-checkbox>
					</el-checkbox-group>
				</div>
			</el-col>
			<el-col :span="6" class="opt">
				<el-button type="primary" plain @click="hanleAdd">添加
				<i class="el-icon-arrow-right"></i>
				</el-button>
				<el-button type="primary" plain @click="hanleDelete">移除
				<i class="el-icon-arrow-left"></i>
				</el-button>
			</el-col>

			<el-col :span="6">
				<div class="item">
					<el-checkbox
						:indeterminate="isIndeterminate"
						v-model="checkAll"
						@change="handleCheckAllRight"
					>显示字段</el-checkbox>
					<div style="margin: 15px 0;"></div>
					<el-checkbox-group v-model="checkedDatas" @change="handleCheckedRight">
						<el-checkbox v-for="(item,index) in rightData" :label="item.sort" :key="index">
							{{item.label}}
							<div class="btns">
								<el-button
									type="primary"
									icon="el-icon-arrow-up"
									@click="handleMoveUp(item,index)"
									size="mini"
								></el-button>
								<el-button
									type="primary"
									icon="el-icon-arrow-down"
									@click="hanleMoveDown(item,index)"
									size="mini"
								></el-button>
							</div>
						</el-checkbox>
					</el-checkbox-group>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
//  列表移动
import myTable from '@/components/myTable'
export default {
  name: 'selfColoumn',
  components: { myTable },
  data() {
    return {
      leftData: [
        {
          prop: 'name',
          label: '患者姓名',
          sort: 1,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '病历号',
          sort: 2,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '检查科室',
          sort: 3,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '检查类型',
          sort: 4,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '身份证号',
          sort: 5,
          isChecked: true,
        },
        {
          prop: 'name',
          label: '手机号',
          sort: 6,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '患者编号',
          sort: 7,
          isChecked: true,
        },
        {
          prop: 'name',
          label: '患者性别',
          sort: 8,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '报告时间',
          sort: 9,
          isChecked: true,
        },
        {
          prop: 'name',
          label: '检查时间',
          sort: 10,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '审核时间',
          sort: 11,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '归档时间',
          sort: 12,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '检查编号',
          sort: 13,
          isChecked: true,
        },
        {
          prop: 'name',
          label: '门诊号',
          sort: 14,
          isChecked: false,
        },
        {
          prop: 'name',
          label: '住院号',
          sort: 15,
          isChecked: false,
        },
      ],
      rightData: [
        {
          prop: 'name',
          label: '患者姓名',
          sort: 1,
        },
        {
          prop: 'name',
          label: '病历号',
          sort: 2,
        },
        {
          prop: 'name',
          label: '检查科室',
          sort: 3,
        },
        {
          prop: 'name',
          label: '检查类型',
          sort: 4,
        },
        {
          prop: 'name',
          label: '患者姓名2',
          sort: 5,
        },
        {
          prop: 'name',
          label: '患者姓名3',
          sort: 6,
        },
      ],
      checkAll: false,
      allLeftData: [],
      allList: [],
      checkedDatas: [],
      isIndeterminateLeft: false,
      isIndeterminate: false,
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleCheckAllLeft(val) {
      // 左侧全选
      this.allLeftData = val ? this.leftData : []
      this.isIndeterminate = false
    },
    handleCheckedLeft(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.checkedDatas.length
      this.isIndeterminate
				= checkedCount > 0 && checkedCount < this.checkedDatas.length
    },
    handleCheckAllRight(val) {
      // 右侧侧全选
      this.checkAll = val ? this.leftData : []
      this.isIndeterminate = false
    },
    handleCheckedRight(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.checkedDatas.length
      this.isIndeterminate
				= checkedCount > 0 && checkedCount < this.checkedDatas.length
    },
    hanleAdd() {
      console.log(this.checkedDatas)
    },
    hanleDelete() {},
    handleMoveUp(item, index) {
      // 上移
      if (index == 0) {
        this.$message('已移至最开始')
      }
      this.swapItems(this.rightData, index, index - 1, 'up')
    },
    hanleMoveDown(item, index) {
      // 下移动
      if (index == this.rightData.length - 1) {
        this.$message('已移至最后')
      }
      this.swapItems(this.rightData, index, index + 1, 'down')
    },
    swapItems(arr, index1, index2, direction) {
      // 移动位置
      if (direction == 'up') {
        // 置顶
        arr.unshift(arr[index1])
        arr.splice(index1 + 1, 1)
        return arr
      }
      if (direction == 'down') {
        // 置底
        arr.push(arr[index1])
        arr.splice(index1, 1)
        return arr
      }
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
  },
}
</script>

<style scoped lang="less">
.box {
	padding: 1vw 2vw;
	// text-align: center;
	.opt {
		padding-top: 25vh;
	}
	.item {
		// background:rgba(245,245,245,1);
		border-radius:4px 4px 0px 0px;
		border:1px solid rgba(221,221,221,1);
		overflow: hidden;
		// padding-left: 2vw;
		>:nth-child(1) {
			height: 36px;
			line-height: 36px;
			background-color: #ddd;
			margin-left: 0 !important;
		}
		.el-checkbox {
			width: 12vw !important;
			margin-bottom: 15px !important;
			// margin-left: 2vw;
		}
	}
}
.box .el-checkbox-group {
	width: 120px;
}

.btns {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
}
</style>
